<template>
  <el-drawer title="导入XML" class="c-f-d-drawer" :visible.sync="importXmlVisible" append-to-body destroy-on-close :wrapper-closable="false" size="60%">
    <div class="c-f-d-drawer-xml-edit" >
      <code id="xmlEdit" contenteditable="true" @paste.prevent="handlePaste($event)"></code>
      <div class="c-f-d-drawer-tools">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="importXmlVisible = false">取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/an-old-hope.css'

export default {
  name: "cpt-flow-import",
  props: {
    bpmnModeler: Object
  },
  data(){
    return {
      importXmlVisible: false
    }
  },
  mounted() {
  },
  methods: {
    show(){
      this.importXmlVisible = true;
    },
    handlePaste(e) {
      const text = e.clipboardData.getData('text/plain')
      if (text) {
        let autoHighlightResult = hljs.highlightAuto(text);
        console.log(autoHighlightResult)
        e.target.innerHTML = `<pre style="white-space:pre-wrap; margin: 0;">${autoHighlightResult.value}</pre>`;
      }
    },
    async handleSubmit() {
      try {
        const data = document.getElementById("xmlEdit").innerText;
        let {warnings} = await this.bpmnModeler.importXML(data);
        if (warnings && warnings.length) {
          warnings.forEach(warn => console.warn(warn));
        }
        this.importXmlVisible = false;
      } catch (e) {
        console.error(`[Process Designer Warn]: ${e?.message || e}`);
        this.$message.error("导入失败，请检查xml格式是否正确！");
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.c-f-d-drawer-xml-edit {
  height: calc(100% - 53px);
  background-color: #111112;

  code {
    * {
      font-size: 14px;
      font-family: Consolas, Monaco, monospace;
    }
    padding: 5px;
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    color: #c4c6c9;
    overflow-y: auto;
    box-sizing: border-box;
  }
  code:focus { outline:none; }

}

.c-f-d-drawer-tools {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 20px;

  button {
    flex: 1;
  }
}

</style>
